<template>
  <view class="delivery">
    <view class="delivery__goods">
      <view class="delivery__img">
        <image :src="image"></image>
      </view>
      <view class="delivery__info">
        <view>承运公司：{{orderDelivery.shipmentName}}</view>
        <view style="margin:5px 0;">运单编号：{{orderDelivery.waybillNo}}</view>
        <view>官方电话：暂无</view>
      </view>
    </view>
    <van-steps :steps="steps" :active="active" direction="vertical" active-color="#ee0a24"></van-steps>
  </view>
</template>

<script lang='ts'>
  import {
    Component,
    Vue
  } from 'vue-property-decorator'
  import {
    getSenddelivery
  } from "@/api/modules/order";

  @Component({})
  export default class Senddelivery extends Vue {
    steps: Array < any > = []
    image: string = ""
    orderDelivery: any = {}
    active: number = 0
    // 页面周期函数--监听页面加载
    onLoad({
      data
    }) {
      const {
        image,
        orderDelivery
      } = JSON.parse(decodeURIComponent(data));
      this.setData({
        image,
        orderDelivery
      });
      this.getSenddelivery({
        waybillNo: orderDelivery.waybillNo,
        shipperType: orderDelivery.shipperType,
      });

      this.$Pubsub.on("app-launch", () => {
        // { tracesId: "75331757171288", companyName: "中通" }
        this.getSenddelivery({
          waybillNo: orderDelivery.waybillNo,
          shipperType: orderDelivery.shipperType,
        });
      });
    }

    getSenddelivery({
      waybillNo,
      shipperType
    }) {
      getSenddelivery({
        waybillNo,
        shipperType
      }).then(res => {
        const steps = JSON.parse(res) || [];
        if (!steps.map) return;
        this.setData({
          steps: steps.map(({
            context,
            time
          }) => {
            return {
              text: context,
              desc: time
            };
          }),
        });
      });
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background: $main-background;
  }

  @include b(delivery) {
    @include e(goods) {
      @include flex(flex-start);

      padding: 20px 12px;
      margin-bottom: 10px;
      background-color: #fff;
    }

    @include e(img) {
      width: 73px;
      height: 73px;
      margin-right: 10px;

      image {
        width: 100%;
        height: 100%;
      }
    }

    @include e(info) {
      @include flex(flex-start, flex-start);

      flex-direction: column;
    }
  }
</style>